<template>
	<div>
		<h2>{{ sum }}</h2>
		<h3>{{ person.name }} -- {{ person.age }}</h3>

		<button @click="addChange">+1</button> &nbsp;
		<button @click="changeName">修改名字</button> &nbsp;
		<button @click="changeAge">修改年龄</button> &nbsp;
		<button @click="changePerson">修改整个人</button>
		<hr>

		<h2>{{ car.brand }} {{ car.color }}</h2>
		<h3>多少个轮子？{{ car.options.wheel }} -- 引擎是多少？{{ car.options.engine }}</h3>

		<button @click="changeBrand">修改汽车名字</button> &nbsp;
		<button @click="changeColor">修改颜色</button> &nbsp;
		<button @click="changeEngine">修改发动机</button> &nbsp;
		<button @click="changeCar">修改整个车</button>

	</div>
</template>

<script setup lang='ts'>
	import { ref, reactive, shallowRef, shallowReactive } from "vue";

	/** 
	 * shalloRef只能影响第一层的数据，例如 person.value 是整个对象，所以你需要整个对象都要改才会改到
	 * */
	let sum = shallowRef(0);
	let person = shallowRef({
		name: 'zhangsan',
		age: 30
	})


	/**
	 * shallowReactive也是一样只会第一层的数据会受到影响
	 * 也就是说以下brand和color还有options是属于第一层
	 */
	let car = shallowReactive({
		brand: '奔驰',
		color: 'green',
		options: {
			wheel: 4,
			engine: 'v8'
		}
	})

	function addChange() {
		sum.value += 1
	}
	function changeName() {
		person.value.name = '王五'
	}
	function changeAge() {
		person.value.age = 13;
	}
	function changePerson() {
		person.value = {
			name: '王者',
			age: 30
		}
	}

	function changeBrand() {
		car.brand = '宝马'
	}
	function changeColor() {
		car.color = "yellow"
	}
	function changeEngine() {
		car.options.wheel = 8
	}

	// 如果你想改整个车，可以用这种方式
	function changeCar() {
		Object.assign(car, {
			brand: 'Audi',
			color: 'red',
			options: {
				wheel: 8,
				engine: '10'
			}
		})
	}



</script>

<style scoped></style>